<template>
	<view class="user-box">
		<view class="user-box-head">
			<view class="user-header">
				<view class="user-header_avatar">
					<uv-avatar :size="50" :src="userInfo.avatar?userInfo.avatar:''" @click="tochangeinfo"></uv-avatar>
				</view>
				<view class="user-header_content">
					<view class="content" v-if="token">
						<view class="middl">
							<view class="phone">
								<uv-text :text="userInfo.isbusi=='1'?userInfo.realname:userInfo.name" :size="16"
									bold="true" color="#634f2f"></uv-text>
							</view>
							<view class="viptags margin-top-xs">
								<!-- <fy-user-tag v-if="userInfo.isbusi=='1'" text="认" bgcolor="#3d9eff" color="#fff"></fy-user-tag>
								<text v-else class="nobusinfo margin-r-sm">
									未商家认证
								</text> -->
								<block v-if="userInfo.vipnames">
									<text class="vipnames">{{userInfo.vipnames}}</text>
								</block>
							</view>
						</view>
						<view class="right">
							<!-- <uv-text :text="`修改资料`" :size="14" color="#ab6d05"suffixIcon="arrow-right" @click="tobus"
								align="right"></uv-text> -->
						</view>
					</view>
					<view class="content" v-else>
						<view class="middl">
							<view class="phone">
								<uv-text text="登录/注册" :size="16" @click="handleLogin"></uv-text>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="vip-box">
			<uv-cell-group :customStyle="{MarginTop:'0px'}" :border='false'>
				<uv-cell icon="integral-fill" :title="userInfo.vipnames?userInfo.vipnames:'普通会员'" isLink :iconStyle="vipstyle" :rightIconStyle="vipstyle"
					:titleStyle="vipstyle" :cellStyle="vipstyle" url="/pages/mine/vipPkg" :border='false'>
					<template v-slot:value>
						<text style="color:'#f3d187'">更多权益</text>
					</template>
				</uv-cell>
			</uv-cell-group>
			<block v-if="userInfo.vipnames">

			</block>
			<block v-else>
				<view class="novip">您还未成为VIP会员</view>
			</block>

		</view>
		<view class="user-box_links">
			<uv-cell-group :border='false'>
				<uv-cell icon="/static/myicon01.png" title="朋友圈" isLink :value="`${carmsg.pyq}条`"
					url="/pages/mine/pyq"></uv-cell>
				<uv-cell icon="/static/myicon02.png" title="我的车源" isLink :value="`${carmsg.upload}条`"
					url="/pages/mine/carlist"></uv-cell>
				<uv-cell icon="/static/myicon03.png" title="我的求购" isLink :value="`${carmsg.need}条`"
					url="/pages/mine/needlist"></uv-cell>
				<uv-cell icon="/static/myicon05.png" v-if="token" title="邀请好友" isLink
					url="/pages/mine/invite"></uv-cell>
				<uv-cell icon="/static/myicon04.png" title="软件版本"
					:value="`V${appInfo.version}-${appInfo.env}`"></uv-cell>
				<uv-cell icon="/static/myicon06.png" v-if="token" title="退出登录" @click="handleLogout"></uv-cell>
			</uv-cell-group>
		</view>

	</view>
</template>

<script>
	import { mapState,mapGetters } from 'vuex';
	import { querySelfUploadCount } from '@/utils/http.js';
	export default {
		data() {
			return {
				vipstyle: {
					Color: '#f8d589'
				},
				carmsg: {
					need: 0,
					pyq: 0,
					upload: 0
				},
				appInfo: {
					version: '0',
					env: ''
				}
			};
		},
		computed: {
			...mapGetters({ 
				userInfo: 'user/userInfo'
			}),
			...mapState({
				token: state => state.user.token,
			}),

		},
		onLoad() {
			var a = uni.getAppBaseInfo()

			this.appInfo.version = a.version
			// #ifdef MP-WEIXIN 
			this.appInfo.env = __wxConfig.envVersion
			// #endif
			uni.setNavigationBarColor({
				backgroundColor: '#edcd98',
				frontColor: '#000000'
			})
			uni.getLocation({
				success: function(res) {
					console.log('定位', res)
				}
			})
		},
		onShow() {
			uni.showLoading({
				title: '加载中'
			})
			if (this.token) {
				this.selfMsg();
			}
			uni.hideLoading()
			this.$store.dispatch('socket/updateTabbarBadge')
		},
		methods: {
			selfMsg() {
				querySelfUploadCount().then(res => {
					var  d=res.data
					for (var key in d){
						if(!d[key]){
							d[key]=0
						}
					}
					this.carmsg = res.data;
				});
			},
			tochangeinfo() {
				uni.navigateTo({ url: '/pages/mine/changeinfo' });
			},
			handleLogin() {
				uni.navigateTo({ url: '/pages/auth/login' });
			},
			handleLogout() {
				this.$store.dispatch('user/loginOut');
			},
			tobus() {
				uni.navigateTo({ url: '/pages/mine/business' });
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.user-box-head {
			width: 100%;
			height: 280upx;
			position: relative;
			z-index:1;
			overflow: hidden;
	}

	.user-box-head:after {
			width: 130%;
			height: 260upx;
			position: absolute;
			/* 将left设为（100%-宽度）/ 2 */
			left: -15%;
			top: 0;
			z-index: -1;
			content: '';
			border-radius: 0 0 50% 50%;
			background: linear-gradient(to bottom, #edcd98, #ddb779);
	}

	.user-box-head:after {
		width: 130%;
		height: 260upx;
		position: absolute;
		/* 将left设为（100%-宽度）/ 2 */
		left: -15%;
		top: 0;
		z-index: -1;
		content: '';
		border-radius: 0 0 50% 50%;
		background: linear-gradient(to bottom, #edcd98, #ddb779);
	}

	.vip-box {
		width: 92%;
		align-items: center;
		justify-content: center;
		background: #ffffff;
		box-shadow: 0 4px 8px 0 rgba(190, 195, 199, 0.5);
		border-radius: 8px;
		background: linear-gradient(to right, #756f68, #282423);
		margin: 0 auto;
		margin-top: -120upx;
		padding: 20upx 0 30upx 0;
		position: relative;
		z-index: 2;
	}

	.novip {
		color: #e7d5b0;
		font-size: 24upx;
		margin-left: 30upx;
		margin-top: -10upx;
	}

	.user-box {
		.user-header {
			display: flex;
			padding: 30upx;
			align-items: center;

			&_content {
				flex: 1;

				.content {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.middl {

						flex: 1;
						margin-left: 10px;

						.phone {}

						.tags {}

						.nobusinfo {
								color: #f8d589;
								font-size: 22rpx;
								background: #bbb;
								padding: 8upx 20upx;
								border-radius: 30upx;

						}
					}

					.right {
						width: 200upx;
						text-align: right;
						line-height: 42upx;

					}
				}

				.uv-tags {
					margin-top: 15px;
					width: 90px;
				}
			}
		}

		&_links {
			padding: 10px;
			background-color: #fff;
			border-radius: 5px;
		}
	}
	.vipnames{
		background:#ab6d05;
		color:#f8d589;
		border-radius: 20upx;
		padding: 6upx 16upx;
		font-size: 24upx;
	}
</style>